<template>
	<div class="userbox">
		<div class="formdata">
			<el-form :model="form" :rules="rules" ref="bannerForm" label-width="auto" label-position="right">
				<div class="left-side">
					<el-form-item label="&#12288;" prop="picture">
						<img :src="form.picture" v-if="disabled" class="background">
						<sc-upload v-else v-model="form.picture" :title="$t('user_data.uploadPage')" :disabled="disabled" @handleRemove="handleRemovePoster" width="420px" height="560px" fileType="bgImage" :isUploadS3="isUploadS3" @getFile="getFile" @onSuccess="uploadSuccess" :cropper="true" :showCropper="true" cropperType="image/jpeg" :maxSize="5">
							<div v-if="showUpload" class="el-upload--picture-card">
								<div class="file-empty">
									<img src="/icon/banner_icon.png" width="50">
									<p class="p">{{ $t('banner_data.uploadText') }}</p>
									<span class="span word">{{ $t('banner_data.uploadTextSize') }}</span>
								</div>
							</div>
						</sc-upload>
						
					</el-form-item>
				</div>
				<div class="right-side">
					<el-form-item :label="$t('banner_data.usageScenario')" prop="type">
						<el-select v-model="form.scene" :disabled="disabled" :placeholder="$t('table_data.selectText')">
							<el-option
								v-for="item in scenarioList"
								:key="item.value"
								:label="item.name"
								:value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item :label="$t('banner_data.name')" prop="bannerName">
						<el-input type="text" v-model="form.bannerName" clearable :placeholder="$t('formRule.inputPlaceholder')" :disabled="disabled"></el-input>
					</el-form-item>
					<el-form-item :label="$t('banner_data.sort')" prop="bannerSort">
						<el-input type="number" v-model="form.bannerSort" clearable :placeholder="$t('formRule.inputPlaceholder')" :disabled="disabled"></el-input>
					</el-form-item>
					<el-form-item :label="$t('banner_data.startDate')" prop="startDate" >
						<el-date-picker style="display: flex;justify-content: space-between;width:100%" v-model="form.startDate" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" :disabled="disabled" :editable="false" :placeholder="$t('formRule.selectPlaceholder')" :disabled-date="beforeOptions"></el-date-picker>
					</el-form-item>
					<el-form-item :label="$t('banner_data.endDate')" prop="endDate" >
						<el-date-picker style="display: flex;justify-content: space-between;width:100%" v-model="form.endDate" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" :disabled="disabled" :editable="false" :placeholder="$t('formRule.selectPlaceholder')" :disabled-date="backOptions" :default-time="defaultTime"></el-date-picker>
					</el-form-item>
					<el-form-item :label="$t('banner_data.type')" prop="type">
						<el-select v-model="form.type" :disabled="disabled" :placeholder="$t('table_data.selectText')" @change="filterMethod">
							<el-option
								v-for="item in classList"
								:key="item.value"
								:label="item.name"
								:value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="&#12288;" prop="typeId">
						<el-select v-model="form.typeId" filterable :filter-method="searchDataMethod" :disabled="disabled||isEdit" :placeholder="$t('table_data.selectText')">
							<el-option
								v-for="item in selectData"
								:key="item.id"
								:label="item.name"
								:value="item.id">
							</el-option>
						</el-select>
					</el-form-item>
				</div>
			</el-form>
		</div>
		<div id="footer" v-if="!disabled">
			<el-button @click="closeTag" >{{$t('table_data.cancelText')}}</el-button>
			<el-button type="primary" :loading="isSaveing" @click="submit()">{{$t('table_data.saveText')}}</el-button>
		</div>
	</div>
</template>

<script>
import  { banner } from '@/mixin/banner'

	export default {
		emits: ['success', 'closed'],
		components: {
			
		},
		mixins: [banner],
		data() {
			return {
				createFileId: '',
				apiPost: '',
			}
		},
		watch: {
			// "scDialogData": {
      // 	handler: function (val) {
			// 		// if(val.isDefense)this.getBlob()
			// 	},
			// 	immediate: true,
     	// 	deep: true // 可以深度检测到 person 对象的属性值的变化
			// }
		},
		computed: {
			icon() {
				// return function(){
					const dUrl = decodeURIComponent(this.form.fileUrl);
					const str = dUrl.split('?')[0].split('.');
					console.log('fileType',str[str.length-1]);
					const type = str[str.length-1];
					if(type){
						if(['jpg','jpeg','png','gif','webp','tiff','bmp','heif','svg'].includes(type)){
							return 'sc-icon-img'
						}else if(['mp3','wma','ape'].includes(type)){
							return 'sc-icon-mp3'
						}else if(['mp4','mp5','avi','wmv'].includes(type)){
							return 'sc-icon-video'
						}else if(['pdf','txt','xlsx'].includes(type)){
							return 'sc-icon-pdf'
						}else{
							return 'sc-icon-none'
						}
					}
					return 'sc-icon-none'
				// }
			}
		},
		mounted(){
			this.disabled = this.$route.query.type=='detail'?true:false;
			this.$store.commit("updateViewTagsTitle", this.disabled?this.$t('banner_data.homePageDetail'):this.$t('banner_data.homePageEdit'))
			if(this.$route.query.id != 'add'){
				this.getInfo();
			} else {
				this.apiPost = this.$API.creator_artwork.getArtwrokData;
				this.searchDataMethod('');
			}
		},
		methods: {
			async searchDataMethod(value=''){
				const params = {
					pageNum: 1,
					pageSize: 20,
					keyword: value
				}
				Object.assign(params, this.params);
				const res = await this.apiPost.get(params)
				let data = res.data.list || res.data.content;
				this.selectData = data.map(n=>({
					name: n.artworkName || n.theatreName || n.title || (n.shortName && this.setTitle(n.shortName)),
					id: (n.shortId || n.id || n.theatreId).toString()
				}))
				if(this.form.typeId && this.selectData.findIndex(n=>n.id==this.form.typeId)==-1){
					try {
						this.selectData.unshift({
							id: this.form.typeId,
							name: this.form.typeName[this.$i18n.locale]
						})
					} catch (e) {
						console.warn(e)
					}
				}
			},
			setTitle(title) {
				return title[this.$i18n.locale];
			},
			filterMethod(e,isClear=true){
				if(isClear)this.form.typeId = ""
				this.params = {};
				if(e==1)this.apiPost=this.$API.creator_artwork.getArtwrokData
				if(e==2)this.apiPost=this.$API.cinema_artwork.getTheatreData
				if(e==3)this.apiPost=this.$API.user.searchUser
				if(e==4)this.apiPost=this.$API.artwork.getMovie
				if(e==5){
					this.apiPost = this.$API.banner.fetchShortsList;
					this.params.status = 3;
				}
				// if(e==6)this.searchDataMethod('',this.$API.user.searchUser)
				// if(e==7)this.searchDataMethod('',this.$API.artwork.getMovie)
				this.searchDataMethod('')
			},
			async getInfo(){
				this.showUpload = false;
				let id = this.$route.query.id;
				const res = await this.$API.banner.bannerDetail.get(id);
				this.form = res.data;
				this.filterMethod(this.form.type,false)
			},
			closeTag(){
				const tagList = this.$store.state.viewTags.viewTags;
				const tag = this.$route;
				const nowTagIndex = tagList.findIndex(item => item.fullPath == tag.fullPath)
				this.$store.commit("removeViewTags", tag)
				this.$store.commit("removeIframeList", tag)
				this.$store.commit("removeKeepLive", tag.name)

				const leftView = tagList[nowTagIndex - 1]
				if (leftView) {
					this.$router.push(leftView)
				} else {
					this.$router.push('/')
				}
			},
			//表单提交方法
			submit(){
				console.log('data:',this.form)
				this.$refs.bannerForm.validate(async (valid) => {
					if (valid) {
						this.isSaveing = true;
						const form = {};
						for(let i in this.form){
							if(this.form[i])form.i = this.form.i
						}
						Object.assign(form,this.form);
						let api = this.$API.banner.bannerUpload;
						try {
							var res = await api.post(form);
							this.isSaveing = false;
							if(res.code == 'OK'){
								this.$emit('success', this.form, this.mode)
								this.$message.success(this.$t('table_data.operasucc'))
								this.closeTag();
							}else{
								this.$alert(res.message, this.$t('table_data.tips'), {type: 'error'})
							}
						}catch(err){
							this.isSaveing = false;
							console.log(err)
						}
					}
				})
			},
			beforeOptions(v){
				if(!this.form.endDate)return false
				return v.getTime() > new Date(this.form.endDate).getTime();//  - 86400000是否包括当天
			},
			backOptions(v){
				return v.getTime() < new Date(this.form.startDate).getTime();//  - 86400000是否包括当天
			},
		}
	}
</script>

<style scoped>
.userbox {
	background: #fff;
	padding: 30px;
	margin: 16px;
	border: 1px solid #CCCCCC;
	border-radius: 4px;
}
.grid-content {
	border: 1px solid #eee;
	font-size: 14px;
	min-height: 50px;
	/* line-height: 50px; */
	padding-left: 12px;
	display: flex;
  align-items: center;
}
.bg-purple {
	background: #F6F8F9;
	color: #888;
	
	display: flex;
    align-items: center;
}
.el-col-list {
	flex: 0 0 33.3%;
}
.bg-purple-light {
	color: #000;
}
.el-form {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}
.box-card {
	width: 100%
}
:deep .el-upload-list {
	max-height: 150px;
  overflow-y: scroll;
}
:deep .el-transfer {
    width: 80%;
  margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
:deep .el-transfer-panel__filter {
    width: 93%;
}
.chooseCinemabox-title {
    font-size: 20px;
  margin: 0 auto 20px;
}
.chooseCinemabox {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* width: 85%; */
    margin: 0 auto 30px;
    font-size: var(--el-form-label-font-size);
}
:deep .el-transfer-panel {
    width: 40%;
}
.scrollbox {
	width: 100%;
	overflow-y: scroll;
	display: flex;
	max-height: 700px;
	flex-wrap: wrap;
}
.scrollbox-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	border: 1px solid #eee;
	margin: 0 10px 10px 0;
}
.sortNuminput {
	display: flex;
}
.uploadTips {
	width: 100%;
	/* line-height: 200px; */
	color: #888;
	font-size: 14px;
}
.scrollbox .uImg {
	width: 200px;
	height: auto;
	/* height: 400px; */
  /* object-fit: contain; */
}
.right-side {
	width: 46%;
}
.left-side {
	width: 50%;
}
.left-side :deep .el-form-item__label-wrap {
	margin-left: 0 !important;
}
.right-side {
	width: 46%;
}
.uploadbtn {
	cursor: pointer;
}
.uploadbtn:hover {
	color: var(--el-color-primary);
}
.item {
	width: 100%;
	display: flex;
	align-items: flex-start;
}
.tips {
	color: #888;
	font-size: 14px;
	width: 100%;
}

.datebox {
	width: 100%;
	display: flex;
	justify-content: flex-start;
}
.datebox_left,.datebox_right {
	width: 50%;
}
.item-right {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	height: 118px;
}
.el-form-item {
	width: 100%;
}
.leftlabel {
	width: 120px;
}
.el-select {
	width: 100%;
}
.item-lastName {
	display: flex;
	justify-content: space-between !important;
	align-content: space-between !important;
	/* height: 200px; */
	width: 100%;
	margin-bottom: 18px;
}
.icon {
	width: auto;
  height: 40px;
}
.item-right{
	height: 140px;
}
.head {
	width: 500px;
  height: 281px;
}
.background {
	width: 720px;
	height: 420px;
}
.rightInput {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-content: space-between;
	width: 100%;
}
.textarea {
	height: 600px;
}
.item-right-form {
	display: flex;
}
.item>div:nth-child(2){
	margin-left: 200px;
}
#footer {
	display: flex;
	justify-content: center;
	margin-top: 10px;
}
.file-empty {
	display: flex;
	align-items: center;
	flex-direction: column;
}
.file-empty .p {
	color: #333;
	font-size: 20px;
	padding: 10px 0;
}
.file-empty .span {
	color: #888;
	text-align: center;
}

.el-form-item.is-error .sc-upload .el-upload--picture-card {border-color: var(--el-color-danger);}
.sc-upload .el-upload--picture-card {border-radius: 0;width: 100%;height: 100%;}
.sc-upload.sc-upload-round .el-upload--picture-card {border-radius: 50%;}


@media only screen and (max-width: 750px) {
	.left-side, .right-side {
		width: 100%;
	}
	.el-form {
		flex-wrap: wrap;
	}
}
</style>
